<template>
  <div>
    <el-tabs default-active-key="1">
      <el-tab-pane key="1" tab="线条">
        <el-row align="middle">
          <el-col :span="8">Width</el-col>
          <el-col :span="14">
            <el-input-number
              v-model="strokeWidth"
              style="width: 100%"
              :min="1"
              :max="5"
              :step="1"
              @change="(val)=>{
                cell.attr('line/strokeWidth', val)
              }"
            />
          </el-col>
        </el-row>
        <el-row align="middle" style="padding-top: 12px">
          <el-col :span="8">Color</el-col>
          <el-col :span="14">
            <el-input
              v-model="stroke"
              type="color"
              style="width: 100%"
              @change="(e) => {
                cell.attr('line/stroke', e.target.value)
              }"
            />
          </el-col>
        </el-row>
        <el-row align="middle" style="padding-top: 12px">
          <el-col :span="8">Connector</el-col>
          <el-col :span="14">
            <el-select
              v-model="connector"
              style="width: 100%"
              @change="(value)=>{
                cell.setConnector(value)
              }"
            >
              <el-option value="normal">normal</el-option>
              <el-option value="smooth">smooth</el-option>
              <el-option value="rounded">rounded</el-option>
              <el-option value="jumpover">jumpover</el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row align="middle" style="padding-top: 12px">
          <el-col :span="8">label</el-col>
          <el-col :span="14">
            <el-input
              v-model="label"
              type="text"
              style="width: 100%"
              @change="(e) => {
                cell.setLabels([{
                  attrs: { label: { text: e.target.value } }
                }])
              }"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Cell } from '@antv/x6'

export default {
  name: 'Index',
  props: {
    flowGraph: {
      type: null,
      default: null,
      required: true
    },
    id: {
      type: String,
      default: null,
      required: true
    }
  },
  data() {
    return {
      cell: Cell,
      stroke: '#5F95FF',
      strokeWidth: 1,
      connector: 'normal',
      label: ''
    }
  },
  watch: {
    // 监听id的变化
    id: {
      handler(nv) {
        if (nv) {
          const { graph } = this.flowGraph
          const cell = graph.getCellById(nv)
          if (!cell || !cell.isEdge()) {
            return
          }

          this.cell = cell

          const connector = cell.getConnector() || { name: 'normal' }
          this.stroke = cell.attr('line/stroke')
          this.strokeWidth = cell.attr('line/strokeWidth')
          this.connector = connector.name
          // eslint-disable-next-line no-debugger
          console.log(cell.getLabels())
          if (cell.getLabels().length > 0) {
            this.label = cell.getLabels()[0].attrs.label.text
          } else {
            this.label = ''
          }

          // console.log(cell.attr('label/text'))

          // console.log(cell.getLabels()[0].attrs.label.text)

          console.log(cell.labels)
        }
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style scoped>

</style>
